<template>
  <div id="app">
    <div class="container">
      <keep-alive exclude="Search,search-list,Detail,Cart,Address,addAddress,Payment"> <router-view/></keep-alive>

    </div>


    <div class="tabbar" v-show="isactive()">
      <tab-bar>
        <tab-bar-item link="/home">
          <template v-slot:item-coin>
            <img src="@/assets/images/tabbar/home1.png">
          </template>
          <template v-slot:item-coin-active>
            <img src="@/assets/images/tabbar/home2.png">
          </template>
          <template v-slot:item-text>
            <div>首页</div>
          </template>
        </tab-bar-item>
        <tab-bar-item link="/classification">
          <template v-slot:item-coin>
            <img src="@/assets/images/tabbar/sort1.png">
          </template>
          <template v-slot:item-coin-active>
            <img src="@/assets/images/tabbar/sort2.png">
          </template>
          <template v-slot:item-text>
            <div>分类</div>
          </template>
        </tab-bar-item>
        <tab-bar-item link="/cart">
          <template v-slot:item-coin>
            <img src="@/assets/images/tabbar/cart1.png">
          </template>
          <template v-slot:item-coin-active>
            <img src="@/assets/images/tabbar/cart2.png">
          </template>
          <template v-slot:item-text>
            <div>购物车</div>
          </template>
        </tab-bar-item>
        <tab-bar-item link="/profile">
          <template v-slot:item-coin>
            <img src="@/assets/images/tabbar/mine1.png">
          </template>
          <template v-slot:item-coin-active>
            <img src="@/assets/images/tabbar/mine2.png">
          </template>
          <template v-slot:item-text>
            <div>我的</div>
          </template>
        </tab-bar-item>
      </tab-bar>
    </div>

  </div>
</template>
<script>
import TabBar from "./components/common/tabbar/TabBar";
import TabBarItem from "./components/common/tabbar/TabBarItem";
export default {
  name:'App',
  components:{
    TabBarItem,
    TabBar
  },
  created() {
    this.$store.commit('initUser')
  },
  updated() {

  },
  methods:{
    isactive(){
      if(this.$route.path.includes('/home') || this.$route.path==='/classification' || this.$route.path==='/cart' || this.$route.path==='/profile'){
        return true
      }
      else{
        return false
      }
    }
  }
}
</script>
<style scoped lang="scss">
  //.tabbar{
  //  opacity: 0.5;
  //}
  //.container{
  //  position: relative;
  //  bottom: 150px;
  //}
</style>
